<template>
  <div class="filter-form">
    <div class="filter-group">
      <div class="filter-item">
        <label>{{ $t('requesterName') }}:</label>
        <el-input
          v-model="filterFields.requesterName"
          :placeholder="$t('requesterName')"
          clearable
        />
      </div>
      <div class="filter-item">
        <label>{{ $t('taskCategory') }}:</label>
        <el-select
          v-model="filterFields.taskCategory"
          :placeholder="$t('taskCategory')"
          clearable
        >
          <el-option
            v-for="option in options"
            :key="option.value"
            :label="$t(option.labelKey)"
            :value="option.value"
          />
        </el-select>
      </div>
      <div class="filter-item">
        <label>{{ $t('taskStatus') }}:</label>
        <el-select
          v-model="filterFields.taskStatus"
          :placeholder="$t('taskStatus')"
          clearable
        >
          <el-option
            v-for="status in taskStatus"
            :key="status.value"
            :label="$t(status.labelKey)"
            :value="status.value"
          />
        </el-select>
      </div>
      <div class="filter-item">
        <label>{{ $t('creationTime') }}:</label>
        <el-date-picker
          v-model="filterFields.createdAtStart"
          type="date"
          :placeholder="$t('creationTime')"
          :disabled-date="disabledDate"
          @change="formatDate('createdAtStart')"
        />
        <span style="margin: 0 8px;">-</span>
        <el-date-picker
          v-model="filterFields.createdAtEnd"
          type="date"
          :placeholder="$t('creationTime')"
          :disabled-date="disabledDate"
          @change="formatDate('createdAtEnd')"
        />
      </div>
    </div>
    <div class="filter-buttons">
      <el-button type="primary" @click="handleFilter">{{ $t('search') }}</el-button>
      <el-button @click="clearFilter">{{ $t('cancel') }}</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { useI18n } from 'vue-i18n'
import taskCotgary from '../utils/taskCotgray.js'
import dayjs from 'dayjs'
import taskStatusMap from '../utils/taskStatusMap.js'

const { t } = useI18n()

const filterFields = ref({
  requesterName: '',
  taskCategory: null,
  taskStatus: null,
  createdAtStart: null,
  createdAtEnd: null,
})

const options = taskCotgary
const taskStatus = taskStatusMap

const emit = defineEmits(['filter'])

// 禁用未来的日期
const disabledDate = (date) => {
  return date.getTime() > Date.now()
}

// 处理筛选
const handleFilter = () => {
  emit('filter', filterFields.value)
}

// 清空筛选条件并发起请求
const clearFilter = () => {
  filterFields.value = {
    requesterName: '',
    taskCategory: null,
    taskStatus: null,
    createdAtStart: null,
    createdAtEnd: null,
  }
  handleFilter()
}

// 格式化日期
const formatDate = (field) => {
  if (filterFields.value[field]) {
    filterFields.value[field] = dayjs(filterFields.value[field]).format('YYYY-MM-DD')
  }
}
</script>

<style scoped lang="less">
.filter-form {
  display: block;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.filter-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.filter-buttons button {
  padding: 6px 12px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}

button[type='button'] {
  background-color: #409eff;
}

button[type='button']:hover {
  background-color: #66b1ff;
}
</style>
